<template>
  <div class="sz-date-picker">
    <el-input
      v-model="curValue"
      :class="[focus ? 'is-focus' : 'is-normal']"
      readonly
      @focus="focusDate"
      @blur="blurDate"
      ref="inputDate"
      :placeholder="placeholder"
      :validate-event="validateEvent"
    >
      <i class="el-icon-arrow-right" slot="append"></i>
    </el-input>
  </div>
</template>

<script>
/**
 *  移动端
 *  时间-日期 选择组件
 * */
import * as dd from "dingtalk-jsapi";
import _ from "lodash";
export default {
  name: "sz-date-picker",
  components: {},
  props: {
    value: {
      type: String,
      default: ""
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd hh:mm:ss"
    },
    validateEvent: {
      type: Boolean,
      default: true
    },
    // 只读属性
    readonly: {
      type: Boolean,
      default: false
    },
    // date,time,datetime
    type: {
      type: String,
      default: "date"
    },
    placeholder: {
      type: String,
      default: "选择日期"
    }
  },
  data() {
    return {
      focus: false,
      curValue: ""
    };
  },
  watch: {
    curValue(val) {
      if (val) {
        this.$emit("input", val);
      }
    }
  },
  mounted() {
    if (this.value) {
      this.curValue = _.clone(new Date(this.value).Format(this.valueFormat));
    }
  },
  methods: {
    focusDate(val) {
      if (!this.readonly) {
        this.focus = true;
        if (this.type === "date") {
          this.datePicker();
        } else if (this.type === "time") {
          this.timePicker();
        } else if (this.type === "datetime") {
          this.datetimePicker();
        }
      }
    },
    blurDate() {
      this.focus = false;
    },
    // 日期选择
    datePicker() {
      dd.biz.util.datepicker({
        format: this.valueFormat, //注意：format只支持android系统规范，即2015-03-31格式为yyyy-MM-dd
        value: new Date().Format(this.valueFormat), //默认显示日期
        onSuccess: result => {
          this.curValue = result.value;
          this.$refs.inputDate.blur();
        },
        onFail: err => {
          // this.ddAlert(err)
          this.$refs.inputDate.blur();
        }
      });
    },
    // 时间选择
    timePicker() {
      dd.biz.util.timepicker({
        format: this.valueFormat,
        value: new Date().Format(this.valueFormat), //默认显示时间  0.0.3
        onSuccess: result => {
          this.curValue = result.value;
          this.$refs.inputDate.blur();
        },
        onFail: err => {
          this.$refs.inputDate.blur();
        }
      });
    },
    // 日期时间选择
    datetimePicker() {
      dd.biz.util.datetimepicker({
        format: this.valueFormat, //注意：format只支持android系统规范，即2015-03-31格式为yyyy-MM-dd
        value: new Date().Format(this.valueFormat), //默认显示日期
        onSuccess: result => {
          this.curValue = result.value;
          this.$refs.inputDate.blur();
        },
        onFail: err => {
          this.$refs.inputDate.blur();
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.sz-date-picker {
  /deep/ .el-picker-panel {
    display: none !important;
  }

  /deep/ .el-input__inner {
    text-align: right;
    border: none;
    width: 100%;
  }

  /deep/ .el-input {
    width: 100% !important;
  }

  /deep/ .el-input__icon {
    width: auto;
  }

  /deep/ .el-input__suffix-inner {
    /deep/ .el-icon-arrow-right:before {
      content: "\e6e0";
      font-family: element-icons !important;
      speak: none;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      width: auto;
      vertical-align: baseline;
      transition: transform 0.3s;
      cursor: pointer;
    }
  }

  /deep/ .el-input__suffix {
    right: 10px;
  }

  /deep/ .el-input__prefix {
    display: none;
  }
}

.is-focus {
  /deep/ .el-icon-arrow-right {
    transform: rotate(90deg);
  }
}

.is-normal {
  /deep/ .el-icon-arrow-right {
    transform: rotate(0deg);
  }
}
</style>
